<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>智能水电反冲记录</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="../bootstrap/dist/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/bootstrap-datetimepicker.min.css" />
		<link rel="stylesheet" href="../css/fileinput.min.css" />
		<!--<link rel="stylesheet" type="text/css" href="../css/public.css" />-->
	</head>
	<style type="text/css">
		.remove {
			cursor: pointer;
		}
		
		.remove:hover {
			/*color: red;*/
		}
		
		.pagination span {
			font: 14px/34px "";
			padding: 0 5px;
		}
		
		.form-control {
			display: inline-block;
			width: 120px;
		}
		
		.search {
			width: 155px;
		}
		
		.header {
			/*border-bottom: 1px solid #fefefe;*/
		}
		
		.header span {
			padding: 0 5px;
		}
		
		ul {
			display: block;
			list-style-type: disc;
			margin-block-start: 0em;
			margin-block-end: 0em;
			margin-inline-start: 0px;
			margin-inline-end: 0px;
			padding-inline-start: 0px;
		}
		
		li {
			list-style-type: none;
			display: flex;
			justify-content: flex-start;
			border-bottom: 1px solid #ebebeb;
			font: 14px/28px "";
		}
		
		li span {
			display: inline-block;
			width: 20%;
		}
		
		.table_cla {
			/*height: 560px;*/
		}
		
		#te_ul li select {
			padding: 0;
			width: 80%;
		}
		
		#te_ul li input {
			padding: 0;
			width: 80%;
		}
		
		#te_ul li {
			padding: 5px 0;
		}
		
		#te_ul label {
			font: 12px/28px "";
		}
		
		#te_ul li textarea {
			width: 80%;
			height: 100px;
			overflow-y: auto;
			margin-bottom: -5px;
			resize: none;
		}
		
		#te_ul li img {
			width: auto;
			height: 30px;
		}
		
		.modal {
			overflow-y: auto !important;
		}
	</style>

	<body>
		<div id="app" style="width: 100%; margin: 0 auto;padding:0 20px;">
			<div class="header" style="margin-top: 20px;">
				<!--<label for="name">物业</label>-->
				<select id="select_wuye" @change="property_change" v-model="organizeid" style="display: inline-block;" class="form-control">
					<option v-for="item in property_name" :value="item.organizeid" v-text="item.shortname"></option>
				</select>
				<!--<label for="name">小区</label>-->
				<select id="select_village" v-model="areaid" style="display: inline-block;" class="form-control">
					<option v-for="item in village_name" :value="item.areaid" v-text="item.areaname"></option>
				</select>
				<select id="select_billkind" v-model="billkind" style="display: inline-block;" class="form-control">
					<option v-for="item in billkind_name" :value="item.id" v-text="item.name"></option>
				</select>
				<select id="select_rechresult" v-model="rechresult" style="display: inline-block;" class="form-control">
					<option v-for="item in rechresult_name" :value="item.id" v-text="item.name"></option>
				</select>

				<input style="width: 155px;" type="text" class="form-control" name="search1" id="search1" value="" v-model="searchmain" placeholder="请输入表号/房号/业主" />
				<button type="button" class="btn btn-info" @click="search">搜索</button>

			</div>
			<div class="table_cla">
				<table class="table">
					<caption>智能水电反冲记录</caption>
					<thead>
						<tr>
							<th>物业</th>
							<th>小区</th>
							<th>楼宇名称</th>
							<th>单元号</th>
							<!--<th>楼层</th>-->
							<th>房间号</th>
							<th>业主</th>
							<th>表号</th>
							<th>费用类型</th>
							<th>充值金额</th>
							<th>订单时间 </th>
							<th>操作人</th>
							<th>充值状态</th>
							<!--<th>是否设置电价</th>-->
							<th>操作 </th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(tt,index) in table">
							<td v-text="tt.merchantname"></td>
							<td v-text="tt.areaname"></td>
							<td v-text="tt.buildname"></td>
							<td v-text="tt.unitname"></td>
							<!--<td v-text="tt.floorname"></td>-->
							<td v-text="tt.rommcode"></td>
							<td v-text="tt.custname"></td>
							<td v-text="tt.meternum"></td>
							<td v-text="tt.billkindname"></td>							
							<td v-text="tt.paymentamt"></td>
							<td v-text="tt.billdate"></td>
							<td v-text="tt.createusername"></td>
							<td v-text="tt.rechresult1"></td>							
							<td v-if="tt.rechresult==-1" @click="pay(tt)"  class="remove">								
								<button type="button" style="padding: 2px;" class="btn btn-success remove">重新充值</button>								
							</td>
						</tr>
					</tbody>
				</table>
			</div>
			<ul class="pagination">
				<span v-text="count_all"></span>
				<!--<li v-show="current != 1" @click="current-- && goto(current--)">
					<a href="#">上一页</a>
				</li>-->
				<li v-for="index in pages" @click="goto(index)" :class="{'active':current == index}" :key="index">
					<a href="#" v-text="index"></a>
				</li>
				<!--<li v-show="allpage != current && allpage != 0 " @click="current++ && goto(current++)">
					<a href="#">下一页</a>
				</li>-->
				<span>跳到:</span>
				<!--<input style="width: 50px;height: 34px;" min="1" max="{{allpage}}" type="number" name="goto" id="goto" v-model="jump" />-->
				<input style="width: 50px;height: 28px;" name="goto" id="goto" v-model="jump" type="text" oninput="value=value.replace(/[^\d]/g,'')">
				<span>页</span>
				<button type="button" id="gotoo" @click="goto(jump)" class="btn btn-danger ">确定 </button>
			</ul>
			<!-- 模态框（Modal）详情  -->
			<div class="modal fade" id="myModalremove" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
							<h4 class="modal-title" id="myModalLabel">电表数据详情</h4>
						</div>
						<div class="modal-body">
							<ul id="te_ul">
								<li>
									<span>表具id:</span><label v-text="model_data.equipsid"></label>
								</li>
								<li>
									<span>创建时间:</span><label v-text="model_data.createdate"></label>
								</li>
								<li>
									<span>厂商名 :</span><label v-text="model_data.factoryid"></label>
								</li>
								<li>
									<span>ip地址 :</span><label v-text="model_data.ipadder"></label>
								</li>
								<li>
									<span>端口号 :</span><label v-text="model_data.port"></label>
								</li>
								<li>
									<span>mac地址 :</span><label v-text="model_data.boardname"></label>
								</li>
								<li>
									<span>最大功率 : </span><label v-text="model_data.powerlimit"></label>
								</li>

								<li v-if="model_data.ladder1">
									<span>阶梯一:</span><label v-text="model_data.ladder1"></label>
								</li>
								<li v-if="model_data.ladder2">
									<span>阶梯二:</span><label v-text="model_data.ladder2"></label>
								</li>
								<li v-if="model_data.ladder3">
									<span>阶梯三:</span><label v-text="model_data.ladder3"></label>
								</li>

								<li v-if="model_data.price1">
									<span>阶梯价格 1:</span><label v-text="model_data.price1"></label>
								</li>
								<li v-if="model_data.price2">
									<span>阶梯价格 2:</span><label v-text="model_data.price2"></label>
								</li>
								<li v-if="model_data.price3">
									<span>阶梯价格 3:</span><label v-text="model_data.price3"></label>
								</li>
								<li v-if="model_data.price4">
									<span>阶梯价格 4:</span><label v-text="model_data.price4"></label>
								</li>
								<li>
									<span>备注：</span><textarea disabled="disabled" v-text="model_data.remarks"></textarea>
								</li>
							</ul>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

						</div>

					</div>
					<!-- /.modal-content -->
				</div>
				<!-- /.modal -->
			</div>

			<!-- 模态框（Modal）提示信息 -->
			<div class="modal fade" style="z-index: 1052;" id="myModal_tips" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
							<h4 class="modal-title" id="myModalLabel">提示信息</h4>
						</div>
						<div class="modal-body" id="tips" v-text="tips_modal">

						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						</div>
					</div>
				</div>
			</div>

		</div>

	</body>

</html>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="../bootstrap/dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/bootstrap-datetimepicker.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/bootstrap-datetimepicker.zh-CN.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/public.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/fileinput.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/zh.js" type="text/javascript" charset="utf-8"></script>
<script>
	//	var urlr = "http://192.168.0.30:8085"
	new Vue({
		el: '#app',
		data: {
			val_te: "",
			urlr: "",
			current: 1,
			showItem: 5,
			rechresult: "",
			allpage: "",
			jump: "",
			userid: "",
			model_data: "",
			show_caozuo: false,
			tips_modal: "",
			createusername: "",
			organizeid: "",
			areaid: '',
			userId: '',
			fullname: '',
			userName: '',
			start: "",
			end: "",
			data_remove: "",
			vendor: "",
			imgpath: "",
			replace_data: {
				initsum: 0,
				remarks: "",
				watchno: "",
				oldwatchpic: "",
				equipsid: "",
				modifyuserid: "",
				modifyusername: "",
			},
			openEleAccount: "",
			imgpath_fix: "",
			billkind: "",
			billkind_name: [{
				id: "",
				name: "请选择类型"
			}, {
				id: "1",
				name: "电"
			}, {
				id: "2",
				name: "水"
			}, {
				id: "3",
				name: "燃气"
			}],
			rechresult: "",
			rechresult_name: [{
				id: "",
				name: "请选择结果"
			}, {
				id: "1",
				name: "成功"
			}, {
				id: "-1",
				name: "失败"
			}, {
				id: "0",
				name: "充值中"
			}],
			vendor_name: [{
				id: "请选择厂商名字",
				areaname: "请选择厂商名字"
			}],
			set_data: {
				equipsid: "",
				issetprice: '',
				datetime: "",
				price1: "",
				price2: "",
				price3: "",
				price4: "",
				ladder1: "",
				ladder2: "",
				ladder3: "",
			},
			searchmain: "",
			powerlimit: '',
			panduan: true,
			token: "",
			merchantid: "",
			goodsid: '',
			count_all: "",
			get_upload: "",
			fix_data: {
				instadr: '',
			},
			watchtype1: "",
			read_data: {
				balance: "",
				charegcount: "",
				current: "",
				voltage: "",
				currentpower: "",
				totalprice: "",
				tieredpricing: {
					datetime: "",
					ladder1: "",
					ladder2: "",
					ladder3: "",
					price1: "",
					price2: "",
					price3: "",
					price4: "",
				},
			},
			urll: "",
			add_data: {

			},
			vendor_name: [{
				id: "请选择厂商名字",
				areaname: "请选择厂商名字"
			}],
			property_name: [{
				organizeid: "",
				shortname: "请选择物业"
			}],
			village_name: [{
				areaid: "",
				areaname: "请选择小区"
			}],
			leixing: [{
				name: '全部',
				id: ""
			}, {
				name: '充值成功',
				id: "1"
			}, {
				name: '充值失败',
				id: "2"
			}, {
				name: '充值中',
				id: "3"
			}, ],
			leixing_model: "",
			watchtype: 0,
			payid: "",
			jifei: [{
					id: 1,
					value: '单项'
				},
				{
					id: 2,
					value: '三项'
				},

			],
			lou: [{
				buildname: '请选择楼宇',
				id: ""
			}],
			lou_model: "",
			danyuan: [{
				unitname: '请选择单元',
				id: ""
			}],
			danyuan_model: '',
			table: [{

				},

			],
			mac_name: "",
			build: [{
				buildname: '请选择楼宇',
				id: ""
			}],
			build_model: "",
			unit: [{
				unitname: '请选择单元',
				id: ""
			}],
			unit_model: '',
			floor: [{
				floorname: '请选择楼层',
				id: ""
			}],
			floor_model: '',
			room: [{
				rommcode: '请选择房号',
				rommid: ""
			}],

			room_model: '',
			get_upload: ""
		},
		//计算属性
		computed: {

		},
		created: function() {
			var that = this;
			var aa = getUrl();
			that.urlr = aa;
			that.build_model = that.build[0].id;
			that.unit_model = that.unit[0].id;
			that.floor_model = that.floor[0].id;
			that.room_model = that.room[0].rommid;
			that.get_upload = getupload();
		},
		mounted: function() {
			var that = this;			
			that.urltest = sessionStorage.getItem("urltest");
			that.userId = sessionStorage.getItem("userId");
			that.fullname = sessionStorage.getItem("fullname");
			that.userName = sessionStorage.getItem("userName");
			that.organizeid = that.property_name[0].organizeid;
			that.areaid = that.village_name[0].areaid;
			var datainit = {
				pagenumber: 1,
				pagesize: 10,
				merchantid: that.organizeid,
				areaid: this.areaid,
				selectinfo: this.searchmain,
				billkind: this.billkind,
				rechresult: this.rechresult
			};
			this.jiazai(datainit);
			this.table = "";
			that.wuye_name();
		},
		computed: {
			pages: function() {
				var pag = [];
				if(this.current < this.showItem) { //如果当前的激活的项 小于要显示的条数
					//总页数和要显示的条数那个大就显示多少条
					var i = Math.min(this.showItem, this.allpage);
					while(i) {
						pag.unshift(i--);
					}
				} else { //当前页数大于显示页数了
					var middle = this.current - Math.floor(this.showItem / 2), //从哪里开始
						i = this.showItem;
					if(middle > (this.allpage - this.showItem)) {
						middle = (this.allpage - this.showItem) + 1
					}
					while(i--) {
						pag.push(middle++);
					}
				}
				return pag
			},
		},
		methods: {
			//提示
			tips: function(data) {
				var that = this;
				that.tips_modal = data;
				$('#myModal_tips').modal('show');
			},
			//加载物业
			wuye_name: function(data) {
				var that = this;
				var parentid = data;
				var req3 = JSON.stringify({
					requestString: JSON.stringify({
						parentid: parentid,
					}),
					userId: that.userId,
					fullname: that.fullname
				});
				$.ajax({
					contentType: "application/json; charset=utf-8",
					type: "POST",
					url: that.urltest + 'verify/property/selectOrganizeNameList',
					data: req3,
					async: true,
					dataType: "json",
					success: function(msg) {
						if(msg.responseCode == 200) {
							that.property_name = JSON.parse(msg.returnString);
							that.property_name.unshift({
								organizeid: "",
								shortname: "请选择物业"
							});
							that.property_name1 = JSON.parse(msg.returnString);
							that.property_name1.unshift({
								organizeid: "",
								shortname: "请选择物业"
							});
						} else {
							that.tips_modal = msg.resoponseDisp;
							$('#myModal_tips').modal('show');
						}
					},
					error: function() {
						that.tips_modal = "获取信息失败";
						$('#myModal_tips').modal('show');
					}
				});
			},
			//物业改变 小区加载
			property_change: function() {
				var that = this;
				//				console.log(that.organizeid)
				var req3 = JSON.stringify({
					requestString: JSON.stringify({
						merchantid: that.organizeid,
					}),
					userId: that.userId,
					fullname: that.fullname
				})
				if(that.organizeid == '') {
					that.village_name = [{
						areaid: "",
						areaname: "请选择小区"
					}];
					that.areaid = that.village_name[0].areaid;
					return
				}
				$.ajax({
					contentType: "application/json; charset=utf-8",
					type: "POST",
					url: that.urltest + '/verify/property/selectAreaName',
					data: req3,
					async: true,
					dataType: "json",
					success: function(msg) {
						if(msg.responseCode == 200) {
							that.village_name = JSON.parse(msg.returnString);
							that.village_name.unshift({
								areaid: "",
								areaname: "请选择小区"
							});
							that.areaid = that.village_name[0].areaid;
						} else {
							that.tips_modal = msg.resoponseDisp;
							$('#myModal_tips').modal('show');
						}
					},
					error: function() {
						that.tips_modal = "获取信息失败";
						$('#myModal_tips').modal('show');
					}
				});
			},
			//加载数据
			jiazai: function(e) {
				var that = this;
				var data = JSON.stringify({
					requestString: JSON.stringify(e),
					userId: that.userId,
					fullname: that.fullname
				})
				$.ajax({
					contentType: "application/json; charset=utf-8",
					type: "POST",
					url: that.urlr + "/verify/watch/selectMeterreadOrderFormeList",
					data: data,
					async: true,
					dataType: "json",
					success: function(msg) {
						console.log(msg);
						if(msg.responseCode == 200) {
							var data = JSON.parse(msg.returnString);
							for(var i = 0; i < data.length; i++) {
								if(data[i].watchstate == 1) {
									data[i].watchstate = '正常'
								} else if(data[i].watchstate == 2) {
									data[i].watchstate = "未开闸"
								}
								if(data[i].issetprice == 0) {
									data[i].issetprice = '未设置 '
								} else if(data[i].issetprice == 1) {
									data[i].issetprice = "已设置"
								}
								if(data[i].accountstate == 1) {
									data[i].accountstate = '已开户'
								} else if(data[i].accountstate == 0) {
									data[i].accountstate = "未开户"
								}
								if(data[i].watchtype == 1) {
									data[i].watchtype = '单项'
								} else if(data[i].watchtype == 2) {
									data[i].watchtype = "三项"
								}
								if(data[i].rechresult == 1) {
									data[i].rechresult1 = "充值成功"
								} else if(data[i].rechresult == -1) {
									data[i].rechresult1 = "充值失败 "

								} else if(data[i].rechresult == 0) {
									data[i].rechresult1 = "充值中"
								}
								if(data[i].billstatus == 1) {
									data[i].billstatus = "已完成(成功支付)"
								} else if(data[i].billstatus == 2) {
									data[i].billstatus = "已取消 "
								} else if(data[i].billstatus == 3) {
									data[i].billstatus = "已退款"
								} else if(data[i].billstatus == 4) {
									data[i].billstatus = "缴费失败，已退款"
								} else if(data[i].billstatus == 5) {
									data[i].billstatus = "缴费失败，系统自主退款失败"
								}
								if(data[i].rechresult==1){
									data[i].rechresult1 = '成功 ';
								}else if(data[i].rechresult==-1){
									data[i].rechresult1 = '失败 ';
								}else if(data[i].rechresult==0){
									data[i].rechresult1 = '充值中 ';
								}

							}

							that.table = data;
							that.count_all = "共" + msg.count + "条"
							var yu = msg.count % 10;
							if(yu == 0) {
								that.allpage = parseInt(msg.count / 10);
							} else {
								that.allpage = parseInt(msg.count / 10) + 1;
							}

						} else {
							that.tips_modal = msg.resoponseDisp;
							$('#myModal_tips').modal('show');
						}
					},
					error: function() {
						//						alert("获取信息失败");
						that.tips_modal = "获取信息失败";
						$('#myModal_tips').modal('show');
					}
				});

			},
			//跳页
			goto: function(index) {
				if(index == this.current) return;
				if(index > this.allpage) {
					return
				}
				//				debugger
				var re = /^[1-9]+[0-9]*]*$/ //判断正整数      // /^[0-9]+.?[0-9]*$/; //判断字符串是否为数字  
				if(!re.test(index)) {
					return false;
				}
				this.current = index;
				var datainit = {
					pagenumber: index,
					pagesize: 10,
					merchantid: this.organizeid,
					areaid: this.areaid,
					selectinfo: this.searchmain,
					billkind: this.billkind,
					rechresult: this.rechresult
				};
				this.jiazai(datainit);
				//这里可以发送ajax请求
			},
			//搜索
			search: function() {
				var that = this;
				var datainit = {
					pagenumber: 1,
					pagesize: 10,
					merchantid: that.organizeid,
					areaid: that.areaid,
					selectinfo: that.searchmain,
					billkind: that.billkind,
					rechresult: that.rechresult
				}
				if(that.val_te != true) {
					this.jiazai(datainit);
					that.current=1;
				} else {
					//					alert("非法登录");
					that.tips_modal = "非法登录";
					$('#myModal_tips').modal('show');
				}
				
			},
			//详情
			sure_more: function(data) {
				//				console.log(data)
				var that = this;
				that.model_data = data;
			},
			//点击进去    置空 数据
			read_metera_action: function() {
				var that = this;
				that.read_data = {
					balance: "",
					charegcount: "",
					current: "",
					voltage: "",
					currentpower: "",
					totalprice: "",
					tieredpricing: {
						datetime: "",
						ladder1: "",
						ladder2: "",
						ladder3: "",
						price1: "",
						price2: "",
						price3: "",
						price4: "",
					},
				}
			},
			//重新充值
			pay:function(data){
				console.log(data)
				var  that = this;
				var data = JSON.stringify({
					requestString: JSON.stringify({
						id:data.id
					}),
					userId: that.userId,
					fullname: that.fullname
				})
				$.ajax({
					contentType: "application/json; charset=utf-8",
					type: "POST",
					url: that.urltest + '/verify/watch/recharge',
					data: data,
					async: true,
					dataType: "json",
					success: function(msg) {
						if(msg.responseCode == 200) {							
							that.tips_modal = "重新充值指令发送成功";
							$('#myModal_tips').modal('show');
							$('#myModal_tips').on('hide.bs.modal', function() {
								window.location.reload()
								
							})
						} else {
							that.tips_modal = msg.resoponseDisp;
							$('#myModal_tips').modal('show');
						}
					},
					error: function() {
						that.tips_modal = "获取信息失败";
						$('#myModal_tips').modal('show');
					}
				});
			},

		},

	})
</script>